<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }

  .ivu-cell-extra {
    color: #ed4014;
  }
</style>

<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col id="indexPhone1" span="1"
         :style="phoneStyle?{background:'#ffffff',height:'50px',borderTop: '1px solid #cccccc'}:{background:'#3F88D5',height:'100vh'}">
      <NavLeft :selected="1" :avatar="avatar"></NavLeft>
    </Col>
    <Col id="indexPhone2" span="4">
      <NavMiddle :itemList="itemList"></NavMiddle>
    </Col>
    <Col id="indexPhone3" span="19" style="background:#f5f7f9;height:100vh;">
      <Layout>
        <Content :style="{padding: '0 16px 16px'}">
          <div class="indexBanner" v-if="phoneStyle">
            <span class="phoneBack" @click="$router.back(-1)"><Icon type="ios-arrow-back"/>返回</span>
            <span class="text">{{ header_title }}</span>
          </div>
          <Breadcrumb :style="{margin: '16px 0'}">
            <Row type="flex" justify="space-between">
              <Col span="9">
                <span style="font-size: 16px;color: rgb(70, 76, 91);line-height: 36px;cursor: pointer"
                      @click="$router.back(-1)" v-if="!phoneStyle"><Icon type="ios-arrow-back"/>返回</span>
                <DatePicker size="large" type="date" placeholder="选择日期" :editable="false" :clearable="false"
                            :value="chooseDate" @on-change="dateChange" style="float:right;margin-right:10px;"
                            v-if="phoneStyle"></DatePicker>
              </Col>
              <Col span="6" class="title-top-center"
                   style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);text-align:center;line-height: 36px"
                   v-if="!phoneStyle">
                {{ header_title }}
              </Col>
              <Col span="9" class="drop">
                <Dropdown trigger="click" style="float: right" @on-click="dropdownClick" id="dropdownList">
                  <a type="text" size="large" style="float:right" class="btn_tools">
                    <Icon type="ios-share-alt" size="20"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem name="1">分享</DropdownItem>
                    <DropdownItem name="2">引用</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
                <a :href="'/item/parameter?id='+unit_id" type="text" size="large"
                   style="float:right;margin-right:10px;" class="btn_tools" v-if="isWechat">
                  <Icon type="ios-cog" size="20"></Icon>
                </a>
                <DatePicker size="large" type="date" placeholder="选择日期" :editable="false" :clearable="false"
                            @on-change="dateChange" :value="chooseDate" v-if="!phoneStyle"
                            style="float:right;margin-right:10px;"></DatePicker>
              </Col>
            </Row>
          </Breadcrumb>
          <!-- 指标板块 -->
          <Card class="quota">
            <div :class="header_bg_css">{{ header_msg }}</div>
            <div class="content detailContent">
              <div class="noData colorGray" v-if="!isWork">暂无数据</div>
              <div class="dc_con" ref="echart" id="main" style="min-height:508px;width: 70%;background: #fff"
                   @click="toRecord"></div>
              <div class="conRight dc_con">
              </div>
            </div>
          </Card>
          <!-- 问题&待处理事项 -->
          <div style="margin-top: 20px">
            <quesDiv :quesDivData="problem_list" :isIndex="false" v-if="quesDivShow" @needChange="needChange"></quesDiv>
          </div>
          <quote :entryData="entryData" v-if="showQuote" @saveEntry="saveEntry"></quote>
        </Content>
      </Layout>
    </Col>
  </Row>
</template>

<script>
  import cookie from 'js-cookie';
  import NavLeft from '@/components/NavLeft';
  import NavMiddle from '@/components/NavMiddle';
  import quesDiv from '@/components/quesDiv'
  import quote from '../../../assembly/entryForQuote'

  export default {
    name: "scene",
    data() {
      return {
        chart: null,
        isCollapsed: false,
        itemList: [],
        itemInfo: [],
        zbList: [],
        bardata_list: [],
        legend_list: [],
        unit_id: "",
        avatar: "",
        now_score: "5分",
        problem_list: [],
        quesDivShow: false,
        header_msg: "",
        header_title: "",
        right_info: {},
        target_value: "",
        confirm_value: "",
        chooseQS: 0,
        header_bg_css: "titleBack",
        tongji_id: 0,
        chooseDate: cookie.get('chooseDate'),
        phoneStyle: false,
        isWechat: false,
        showQuote: false,
        entryData: {},
        isWork: false,
      };
    },
    components: {NavLeft: NavLeft, NavMiddle: NavMiddle, quesDiv: quesDiv,quote: quote},
    methods: {
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        var unit_id = localStorage.getItem('middleId')
        var dossier_id = this.$route.query.dossier_id;
        var statis_pid = this.$route.query.pid;
        if (!unit_id) {
          this.$Message.warning('无参数不能访问');
          return;
        }
        if (!dossier_id) {
          this.$Message.warning('缺少记录ID');
          return;
        }
        if (!statis_pid) {
          this.$Message.warning('缺少记录父级ID');
          return;
        }
        this.$Loading.start();
        var str = {
          unit_id: unit_id,
          dossier_id: dossier_id,
          statis_pid: statis_pid,
          status: this.chooseQS,
          ymd: this.chooseDate,
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/recordtj.html', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          // console.log(res)
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                window.location.href = res.data.backurl
              }
            });

          } else if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            // console.log(res.data);
            this.isWork = res.data.isWork
            this.avatar = res.data.avatar;
            this.itemList = res.data.item_all_list;
            this.itemInfo = res.data;
            this.problem_list = res.data.problem_list;
            this.quesDivShow = true;
            localStorage.setItem('middleId', res.data.unit_id)
            if (this.isWork) {
              this.zbList = res.data.list;
              this.now_score = this.zbList[0].score + '分';
              this.header_title = res.data.title;
              this.header_msg = this.zbList[0].title;
              this.tongji_id = this.zbList[0].tongji_id;
              //this.right_info=this.zbList[1];
              //this.confirm_value=this.zbList[1].cont.confirm_value;
              //this.target_value=this.zbList[1].cont.target_value;
              if (this.zbList[0].score == 5) {
                this.header_bg_css = "titleBack gradualGreen";
              }
              if (this.zbList[0].score == 4) {
                this.header_bg_css = "titleBack gradualYellow";
              }
              if (this.zbList[0].score < 4) {
                this.header_bg_css = "titleBack gradualRed";
              }
              for (var i = 0; i < this.zbList[0].cont.length; i++) {
                var data = {};
                data.name = this.zbList[0].cont[i].explain;
                ;
                data.value = this.zbList[0].cont[i].mb_reach_rate;
                this.bardata_list[i] = data;
                this.legend_list[i] = this.zbList[0].cont[i].explain;
              }

              for (var i = 0; i < this.problem_list.length; i++) {
                if (this.problem_list[i].grade == '红色') {
                  this.problem_list[i].status_css = "colorLabel bgRed";
                } else if (this.problem_list[i].grade == '黄色') {
                  this.problem_list[i].status_css = "colorLabel bgYellow";
                } else if (this.problem_list[i].grade == '橙色') {
                  this.problem_list[i].status_css = "colorLabel bgOrange";
                } else if (this.problem_list[i].grade == '蓝色') {
                  this.problem_list[i].status_css = "colorLabel bgBlue";
                } else {
                  this.problem_list[i].status_css = "colorLabel";
                }

              }
              //console.log(this.bardata_list);
              //console.log(this.legend_list);
              this.initEchart();
            } else {
              this.header_msg = '今日未开班';
              this.header_bg_css = "titleBack bgGray";
              this.chart = this.$echarts.init(this.$refs.echart);
              this.chart.clear();
            }
          }
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      initEchart() {
        //let chart = this.$echarts.init(document.getElementById('main'));
        this.chart = this.$echarts.init(this.$refs.echart);
        let option = {
          tooltip: {
            show: false,
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            right: this.phoneStyle ? 50 : 40,
            top: this.phoneStyle ? 300 : 200,
            data: this.legend_list,
            formatter: function (name) {
              return name;
            },
            textStyle: {
              fontSize: 14,
            }
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '70%'],
              center: this.phoneStyle ? ['50%', '30%'] : ['30%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  formatter: this.now_score,
                  /**
                   formatter:function (argument) {
                    var html;
                    html="分";
                    return html;
                  },
                   **/
                  textStyle: {
                    fontSize: 50,
                    color: '#f15c60'
                  }
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: this.bardata_list,
            }
          ],
        };
        this.chart.setOption(option);
      },
      toRecord() {
        this.$router.push({
          path: '/item/quota/scene/sceneRecord',
          query: {
            id: this.$route.query.id,
            tongji_id: this.tongji_id,
            chooseDate: this.chooseDate,
            pid: this.$route.query.pid
          }
        })
      },
      needChange(val) {
        this.chooseQS = val
        this.getData()
      },
      dateChange(val) {
        let self = this
        self.chooseDate = val
        cookie.set('chooseDate', val)
        self.getData()
      },
      dropdownClick(val) {
        let self = this
        switch (val) {
          case '1': //分享
            break;
          case '2': //引用
            self.showQuote = true
            self.entryData = {
              type: 2,
              unit_id: self.$route.query.id,
              card: {
                is_type: 3,
                route: self.$route.path,
                fullPath: self.$route.fullPath,
                query: self.$route.query,
                ymd: self.chooseDate
              },
            }
            break
        }
      },
      saveEntry() {
        let self = this
        self.showQuote = false
        self.entryData = {}
      },
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    created() {
      let self = this
      let dw = document.body.clientWidth
      if (dw < 820) {
        self.phoneStyle = true
      } else {
        self.phoneStyle = false
      }
      window.document.title = 'SCS详情';
      this.getData();
      self.isWechat = !self.$twjsdes.isWechat()
    },
    mounted() {
      this.$nextTick(() => {
        //this.initEchart();
      });
    }
  }
</script>

<style lang="less">
  .quota {
    display: flex;
    flex-direction: column;
    padding: 0;
    .ivu-card-body {
      padding: 0;
      .titleBack {
        width: 100%;
        height: 52px;
        line-height: 52px;
        text-align: left;
        /**background: linear-gradient(to right, #f15c60 , #fd7862);**/
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: #fff;
        font-size: 17px;
        padding-left: 21px;
      }
      .content {
        display: flex;
        flex-direction: row;
        background: #f9f9f9;
        position: relative;
        .noData{
          font-size: 40px;
          position: absolute;
          left: 29%;
          top: 36%;
          z-index: 2;
        }
        .conRight {
          width: 30%;
          display: flex;
          flex-direction: column;
          padding: 20px;
          box-sizing: border-box;
          .cr_con {
            .ivu-card-body {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              background: #fff;
              padding: 16px;
              cursor: pointer;
              .crc_left {
                width: 100%;
                display: flex;
                flex-direction: column;
                .crclText {
                  font-size: 13px;
                  color: #222222;
                  .ctColor1 {
                    color: #ffb11b;
                  }
                  .ctColor2 {
                    color: #222222;
                  }
                }
                .ctColor {
                  color: #666666;
                  margin-bottom: 7px;
                }
                .ctColor:last-child {
                  margin-bottom: 0;
                }
                .ctTitle {
                  margin-bottom: 10px;
                }
              }
              .crc_right {
                display: flex;
                flex-direction: column;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  }
  .cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .cdLeft {
      display: flex;
      flex-direction: column;
      .cl_top {
        font-size: 16px;
        color: #222222;
      }
      .cl_down {
        font-size: 16px;
        color: #666666;
        margin-top: 10px;
        .cld_color {
          color: #ffb11b;
          margin-left: 10px;
        }
        .cld_color2 {
          color: #56b44a;
          margin-left: 10px;
        }
      }
      .special {
        background: #dc4444;
        color: #fff;
        font-size: 13px;
        padding: 2px 4px;
      }
    }
    .cdright {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .ivu-card-extra {
    top: 11px;
    .conButtons {
      display: flex;
      flex-direction: row;
      .buts {
        padding: 4px 8px;
        background: #f5f5f5;
        font-size: 14px;
        color: #666666;
        margin-right: 10px;
        cursor: pointer;
        border-radius: 3px;
      }
      .chooseButs {
        background: #3f8fe0;
        color: #fff;
      }
    }
  }
  .quesDiv {
    background: #f9f9f9;
    .ivu-card-head {
      background: #fff;
    }
    .ivu-card-body {
      padding-top: 0;
    }
    .contentDiv {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .con {
        width: 32.5%;
        margin-right: 10px;
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        position: relative;
        cursor: pointer;
        .ivu-card-body {
          width: 100%;
          height: 100%;
          background: #fff;
          padding-top: 16px;
          .colorLabel {
            display: block;
            width: 40px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 8px;
            color: #fff;
            position: absolute;
            top: 0;
            left: 16px;
          }
          .blueL {
            background: #3384dd;
          }
          .yellowL {
            background: #f2ca51;
          }
          .orangeL {
            background: #ffb11b;
          }
          .redL {
            background: #f15c60;
          }
          .garyL {
            background: #cccccc;
          }
          .times {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 25px;
            margin-bottom: 10px;
            line-height: 13px;
            .timesLeft {
              font-size: 12px;
              color: #666666;
            }
            .timesRight {
              font-size: 13px;
              color: #3f8fe0;
            }
          }
          .conText {
            font-size: 13px;
            color: #222222;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          .needExplain {
            color: #dc4444;
          }
        }
      }
      .more {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        color: #999999;
        background: #f9f9f9;
        margin-top: 16px;
        cursor: pointer;
      }
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    #indexPhone1 {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;
      width: 100%;
      height: 50px !important;
    }
    #indexPhone2 {
      display: none;
    }
    #indexPhone3 {
      width: 100%;
      padding-bottom: 66px !important;
      box-sizing: border-box;
      overflow-y: auto;
      .ivu-layout-content {
        padding: 0 !important;
        .ivu-card-body {
          padding: 0 !important;
        }
      }
      .indexBanner {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        height: 44px;
        line-height: 44px;
        box-sizing: border-box;
        background: #fff;
        border-bottom: 1px solid #e5e5e5;
        .phoneBack {
          font-size: 14px;
          color: rgb(70, 76, 91);
          line-height: 44px;
          cursor: pointer;
          position: absolute;
          left: 8px;
          top: 0;
        }
        .text {
          font-size: 18px;
          color: #222222;
        }
      }
      .ivu-breadcrumb {
        margin: 8px 0 !important;
        padding: 0 8px !important;
      }
      .detailContent {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        .dc_con {
          width: 100% !important;
          padding: 8px !important;
          padding-top: 0px !important;
          .cr_con {
            margin-top: 8px !important;
            .ivu-card-body {
              padding: 8px !important;
            }
          }
        }
        .dc_con:first-child {
          padding: 8px !important;
          box-sizing: border-box;
          border-bottom: 1px solid #e5e5e5;
        }
      }
    }
  }
</style>
